<template>
	<view class="course-form">
		<bsNavBar title='开通课程'></bsNavBar>
		<view class="form-box">
			<u-form :label-style='style' label-position='top' :error-type="errorType" :model="form" ref="uForm">
				<u-form-item label="开课码" prop="openCode">
					<u-input v-model="form.openCode" placeholder='请输入开课码' />
				</u-form-item>
				<u-form-item label="姓名" prop="name">
					<u-input v-model="form.name" placeholder='请输入姓名' />
				</u-form-item>
				<u-form-item label="性别">
					<u-input placeholder='请选择性别' @click="accountTypeShow = true" v-model="form.sex" type="select" />
				</u-form-item>
				<u-select @confirm='confirm' title='选择性别' v-model="accountTypeShow" :list="accountType"></u-select>
				<u-form-item label="身份证号" prop="idNumber">
					<u-input v-model="form.idNumber" placeholder='请输入身份证号' />
				</u-form-item>
				<u-form-item label="邮箱" prop="email">
					<u-input v-model="form.email" placeholder='请输入邮箱' />
				</u-form-item>
				<u-form-item label="电话" prop="phone">
					<u-input v-model="form.phone" placeholder='请输入电话' />
				</u-form-item>
				<u-form-item label="地址" prop="address">
					<u-input v-model="form.address" placeholder='请输入地址' />
				</u-form-item>
				<u-form-item label="开课说明">
					<view class="content-text">
						请确保所填信息的真实性，如有虚假信息，我们将取消您的课程，结业证书也将失效。
					</view>
				</u-form-item>
			</u-form>
		</view>
		<view class="btn-box">
			<u-button type='jz' @click="submit">开通课程</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				accountTypeShow: false,
				accountType: [{
						label: '女',
						value: '0'
					},
					{
						label: '男',
						value: '1'
					},
				],
				form: {
					name: '',
					openCode: '',
					sex: '',
					idNumber: '',
					email: '',
					phone: '',
					address: ''
				},
				errorType: ['border-bottom', 'toast', 'message'],
				style: {
					color: '#303030',
					fontWeight: 'bold'
				},
				rules: {
					name: [{
							required: true,
							message: '请输入姓名',
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur'],
						},
						{
							pattern: /^[a-zA-Z\u4e00-\u9fa5]+$/,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '姓名不能输入数字和特殊符号'
						},
					],
					sex: [{
						required: true,
						message: '请选择性别',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}, ],
					email: [{
							required: true,
							message: '请输入email',
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur'],
						},
						{
							pattern: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '请输入正确的邮箱格式'
						},
					],
					idNumber: [{
							required: true,
							message: '请输入身份证号码',
							trigger: ['change', 'blur'],
						},
						{
							pattern: /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/,
							transform(value) {
								return String(value);
							},
							message: '请输入正确的身份证格式'
						},
					],
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
							transform(value) {
								return String(value);
							},
							message: '请输入正确的手机号格式'
						},
					],
					address: [{
						min: 3,
						message: '地址不能少于3个字',
						trigger: 'blur'
					}],
					openCode: [{
						min: 3,
						message: '开课码不得少于3位字符',
						trigger: 'blur'
					}]
				},
				courseId: ''

			};
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(e) {
			if (e.courseId) {
				this.courseId = e.courseId
				this.form.courseId = e.courseId
			}
		},
		watch: {},
		methods: {
			confirm(val) {
				console.log(val)
				this.form.sex = val[0].label
			},
			handAccountType() {

			},
			submit() {

				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.form.sex = this.form.sex == '男' ? 1 : 0
						this.$u.api.openCourse(this.form).then(res => {
							console.log(res, '提交表单')
							uni.showToast({
								title: '开通成功',
							})
							uni.navigateTo({
								url: '/pages/onlineTrain/trainDetails/courseForm/openSucceed?courseId=' + this.courseId
							})
						})


						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.course-form {
		.form-box {
			padding: 0 30rpx;
			padding-bottom: 200rpx;

			.account-text {
				color: $bs-color-theme;
				font-size: 24rpx;
				text-align: right;
				margin-top: 10rpx;
			}

			.up-img {
				width: 88rpx;
				height: 88rpx;
				border-radius: 50%;
				position: relative;
				overflow: hidden;

				.icon {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					z-index: 3;
				}

				.img {
					width: 88rpx;
					height: 88rpx;
					border-radius: 50%;
				}

				&::after {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					content: '';
					background: rgba(0, 0, 0, 0.5);
				}
			}
		}

		.btn-box {
			background: #FFFFFF;
			box-shadow: 0 0 26px 0 rgba(18, 27, 83, 0.07);
			padding: 20rpx;
			position: fixed;
			bottom: 0;
			width: 100%;
		}
	}
</style>
